<template>
<view>
	<!-- #ifdef APP-NVUE -->
	<cell>
		<!-- #endif -->
        <view v-if="checkshowtime(pre_time)"  class="zfb-tk-time">{{fmtTime(item.time)}}</view>
		<view style="position: relative;" @click="chooseMsg">
			<view v-if="chatCheckedShow" class="message-check-box">
				<view class="abso_checkbox">
					<uni-icons :type="itemchecked ? 'checkbox-filled' : 'circle'" :color="itemchecked ? '#09C160' : '#C0C0C0'" size="28" />
				</view>
				<view class="abso_posicheckbox"></view>
			</view>
			<view class="zfb-tk-item" :class="[{ 'zfb-tk-msgleft': item.type == 1 }, { 'zfb-tk-msgright': item.type == 2 }, { 'zfb-tk-msgcenter': item.type == 3 }]">
				<openTool :class="[{ 'openTool-msgleft': item.type == 1 }, { 'openTool-msgright': item.type == 2 }]" :talkTo="talkTo" :ref="'toolx'+itemKey" :data="item" :itemKey="itemKey"></openTool>
				<image class="zfb-tk-avatar" @click="gochatOne(item)" v-if="item.type !== 3" :src="item.portrait" mode="aspectFill"></image>
				<view class="zfb-tk-item-contentx" @longpress="longpressItem($event,itemKey,item)">
					<view v-if="item.type == 1 && item.windowType == 'GROUP'" class="zfb-msg-nickname">{{item.nickName}}</view>
					<view class="zfb-tk-item-contentx-c">
						<view class="zfb-tk-time-notsend wxfont fssb" @click="tryagin(item, itemKey)" v-if="item.sendtype && item.sendtype == 'error'"></view>
						<view class="zfb-tk-item-contentx-c-tool">
							<!-- 文本 -->
							<view class="zfb-tk-item-c" v-if="item.msgType == 'TEXT'">
								<block :key="index" v-for="(textitem, index) in textChuli(item.content)">
									<text space="nbsp" v-if="textitem.type == 'text'">{{textitem.text}}</text>
									<text space="nbsp" v-if="textitem.type == 'url'" style="color:#4D6B8B;" @click="goToUrl(textitem.text)">{{textitem.text}}</text>
								</block>
							</view>
							<view class="zfb-tk-item-c" v-if="item.msgType == 'TEXTAT'">
								<block :key="index" v-for="(textitem, index) in textChuli(returnParse(item.content).content)">
									<text space="nbsp" v-if="textitem.type == 'text'">{{textitem.text}}</text>
									<text space="nbsp" v-if="textitem.type == 'url'" style="color:#4D6B8B;" @click="goToUrl(textitem.text)">{{textitem.text}}</text>
								</block>
							</view>
							<view class="zfb-tk-item-c" v-if="item.msgType == 'ALERT'">
								<text>{{ item.content }}</text>
							</view>
							<!-- 位置 -->
							<view class="zfb-tk-item-c-LOCATION" v-if="item.msgType == 'LOCATION'" @click="goMap(returnParse(item.content))">	
								<view class="zfb-tk-item-c-LOCATION-name">{{ returnParse(item.content).name }}</view>
								<view class="zfb-tk-item-c-LOCATION-address">{{ returnParse(item.content).address }}</view>	
								<image class="zfb-tk-item-c-LOCATION-map" src="../../static/wx/map.png" mode="aspectFit"></image>
							</view>
							<!-- 图片 -->
							<image class="zfb-tk-item-c-img" v-if="item.msgType == 'IMAGE'" :src="getimgurl()" mode="aspectFill" @click="lookimg(returnParse(item.content).url)"></image>
							<!-- 语音 -->
							<view v-if="item.msgType == 'VOICE'" class="zfb-tk-item-c-VOICE">
								<view class="zfb-tk-item-c-VOICE-msg">
									<!-- <view class="zfb-tk-item-c-VOICE-tras" @click="showTrs =! showTrs">
										<text>转文字</text>
									</view> -->
									<view class="zfb-tk-item-c" :style="{width:contentMicWidth(returnParse(item.content).time)}" @click="playVOICE(returnParse(item.content).url)">
										<text v-if="item.type == 2">{{returnParse(item.content).time}} ″</text>
										<image v-if="item.type == 1" class="content-icon" :src="play_mic_id==returnParse(item.content).url?'/static/img/chat/play-left.gif':'/static/img/chat/default-left.png'"  ></image>
										<image v-else class="content-icon" :src="play_mic_id==returnParse(item.content).url?'/static/img/chat/play-right.gif':'/static/img/chat/default-right.png'" size="36"></image>
										<text v-if="item.type == 1">{{returnParse(item.content).time}} ″</text>
									</view>
								</view>
							</view>
							<!-- 附件 -->
			                <view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'FILE'" @click="lookFile(returnParse(item.content))">
								<view class="zfb-tk-item-c-CARD-top">
									<view class="zfb-tk-item-c-CARD-top-content">
										<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).name}}</view>
										<view class="zfb-tk-item-c-CARD-no">{{format_size(returnParse(item.content).size)}}</view>
									</view>
									<image class="zfb-tk-item-c-CARD-top-img" :src="getFileType(returnParse(item.content))" mode=""></image>
								</view>
								<view class="zfb-tk-item-c-CARD-card" v-if="item.progress_show==1">
			                    <aiprogress :percentage="item.progress_num" :noData="true" :bg-color="item.progress_color"></aiprogress>
			                    </view>
							</view>
							<view v-if="item.msgType == 'TRTC_VOICE_END'" class="zfb-tk-item-c-TRTC_VOICE_END" @click="sendVoiceCall">
								<view class="zfb-tk-TRTC zfb-tk-item-c">
									<view class="wxfont yuyin3"></view>
									<text>语音通话 时长{{item.content}}</text>
								</view>
							</view> 
							<view v-if="item.msgType == 'TRTC_VIDEO_END'" class="zfb-tk-item-c-TRTC_VIDEO_END" @click="sendVideoCall">
								<view class="zfb-tk-TRTC zfb-tk-item-c">
									<view class="wxfont shipin"></view>
									<text>视频通话 时长{{item.content}}</text>
								</view>
							</view>
							<view class="zfb-tk-item-c-video" v-if="item.msgType == 'VIDEO'" @click="openVideo(returnParse(item.content).videoUrl)">
								<image class="zfb-tk-item-c-img" :src="returnParse(item.content).url" mode="aspectFill"></image>
								<view class="zfb-tk-item-c-video-icon">
									<text class="wxfont bofang"></text>
								</view>
							</view>
							<view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'CARD'" @click="goAddfriend(returnParse(item.content))">
								<view class="zfb-tk-item-c-CARD-top">
									<image class="zfb-tk-item-c-CARD-top-img" :src="returnParse(item.content).avatar" mode=""></image>
									<view class="zfb-tk-item-c-CARD-top-content">
										<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).name}}</view>
										<view class="zfb-tk-item-c-CARD-no">{{returnParse(item.content).chatNo}}</view>
									</view>
								</view>
								<view class="zfb-tk-item-c-CARD-card">推荐名片</view>
							</view>
							<view class="zfb-tk-item-c-CARD" v-if="item.msgType == 'manyMsg'" @click="lookManyMsg">
								<view class="zfb-tk-item-c-CARD-top">
									<view class="zfb-tk-item-c-CARD-top-content">
										<view class="zfb-tk-item-c-CARD-title">{{returnParse(item.content).msgTitle}}的聊天记录</view>
										<view style="height: 10rpx;"></view>
										<view :key="index" v-for="(msgson, index) in returnParse(item.content).msgDesc" class="zfb-tk-item-c-CARD-no">{{msgson.nickname}}:{{msgson.content}}</view>
									</view>
								</view>
								<view class="zfb-tk-item-c-CARD-card">聊天记录</view>
							</view>
							<view v-if="showTrs" class="zfb-tk-item-c-VOICE-tras-text">{{returnParse(item.content).text}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
		</view>
</template>

<script>
// #ifdef APP-PLUS
//const TUICalling = uni.requireNativePlugin("TUICallingUniPlugin-TUICallingModule");
// #endif
import {
	timestampFormat,datetime_to_unix
} from '../../common/time.js';
var app = getApp();
import openTool from './openTool.vue'
import aiprogress from '@/components/ai-progress/ai-progress.vue';
export default {
	emits: ['tryagin','longpressItem','lookimg'],
	name: 'chat-item',
	components:{
		openTool,aiprogress
	},
	props: {
		item: {
			type: Object,
			default: {}
		},
		play_mic_id: {
			type: String,
			default: ''
		},
		pre_time: {
			type: String,
			default: ''
		},
		talkTo: {
			type: Object,
			default: {}
		},
		itemKey: {
			type: Number
		},
		longTapItemKey: {
			type: [Number,String],
			default:''
		}
	},
	watch:{
	    play_mic_id(v){
           if(this.item.msgType!== 'VOICE')return;
           var url = this.returnParse(this.item.content).url
           if(v!='0' && v!=url){
				this.paused=false;
                if(this.innerAudioContext){
                    this.innerAudioContext.destroy();
                }
		   }
	    },
		longTapItemKey(v){
			if(this.itemKey==v){
				this.$refs['toolx'+v].showTab();
			}
		}
	},
	data() {
		return {
			innerAudioContext:'',
			paused:false,
			showTrs:false,
            returnParseData:{},
			itemchecked:false
		};
	},
   beforeDestroy() {//console.log('销毁！',this.play_mic_id)
		//销毁ws
        if(this.play_mic_id!='0'){
			if(!this.innerAudioContext)this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.destroy()
			this.paused=!this.paused
            this.changeMicId('0');
        }
	},
	computed: {
		chatCheckedShow(){
			this.itemchecked = false;
			return this.$store.state.chatCheckedShow;
		}
	},
	methods: {
		chooseMsg(){
			if(this.chatCheckedShow){
				this.itemchecked = !this.itemchecked;
				var chat_msg_list = this.$store.state.chat_msg_list;
				if(this.itemchecked){
					var obj = {};
					obj.userId = this.item.userId;
					obj.create_time = this.item.create_time;
					obj.msgType = this.item.msgType;
					obj.content = this.item.msgType == 'TEXT' ? this.item.content : JSON.parse(this.item.content);
					chat_msg_list[this.item.id] = obj;
				}else{
					chat_msg_list[this.item.id] = '';
				}
				this.$store.dispatch('setChatMsgList',chat_msg_list);
			}
		},
		fmtTime(time) {
			return timestampFormat(datetime_to_unix(time));
		},
	    format_size(size){
	        return this.$fc.sizeFilter(size);
	    },
		getFileType(item) {
		    var type = item.ext ? item.ext : 'other';
			return this.$fc.getFileType(type);
		},
        checkshowtime(pre_time){
            if(this.item.msgType=='ALERT')return false;
            if(!pre_time)return true;
            if(!this.item.time)return false;
            var endtime = datetime_to_unix(pre_time);
            var statime = datetime_to_unix(this.item.time);
            return statime-endtime>=300?true:false;
        },
		contentMicWidth(e) {
		    if(e>30)e=30;
			return 130 + e * 8 + 'rpx';
		},
		sendVoiceCall(){
			if(this.chatCheckedShow){
				return;
			}
			//发起语音
			uni.showLoading({
				title:'发起语音通话'
			})
			var formdata={
				userId: this.talkTo.userId, 
				msgType: "TRTC_VOICE_START", 
				content: "TRTC_VOICE_START" 
			}
			this.$http.request({
				url: '/chat/sendMsg',
				method: 'POST',
				data: JSON.stringify(formdata),
				success: (res) => {
					if(res.data.code=='200'){
						if(res.data.data.status!=='0'){
							uni.showToast({
								title:res.data.data.statusLabel,
								icon:'none'
							})
							return
						}
						var userInfo=res.data.data.userInfo
						var data={
							userId:userInfo.userId,
							trtcId:userInfo.trtcId,
							nickName:userInfo.nickName,
							portrait:userInfo.portrait,
							startTime:new Date().getTime(),
							type:'audio'
						}
						uni.setStorage({
							key: 'call',
							data: JSON.stringify(data),
							success: function () {
								console.log('success');
								TUICalling.call({
								    userID: userInfo.trtcId,
								    type: 1
								})
							}
						});
						
					}
				}
			});
		},
		sendVideoCall(){
			if(this.chatCheckedShow){
				return;
			}
			//发起视频
			uni.showLoading({
				title:'发起视频通话'
			})
			var formdata={
				userId: this.talkTo.userId, 
				msgType: "TRTC_VIDEO_START", 
				content: "TRTC_VIDEO_START" 
			}
			this.$http.request({
				url: '/chat/sendMsg',
				method: 'POST',
				data: JSON.stringify(formdata),
				success: (res) => {
					if(res.data.code=='200'){
						if(res.data.data.status!=='0'){
							uni.showToast({
								title:res.data.data.statusLabel,
								icon:'none'
							})
							return
						}
						var userInfo=res.data.data.userInfo
						var data={
							userId:userInfo.userId,
							trtcId:userInfo.trtcId,
							nickName:userInfo.nickName,
							portrait:userInfo.portrait,
							startTime:new Date().getTime(),
							type:'video'
						}
						uni.setStorage({
							key: 'call',
							data: JSON.stringify(data),
							success: function () {
								console.log('success');
								TUICalling.call({
								    userID: userInfo.trtcId,
								    type: 2
								})
							}
						});
					}
				}
			});
		},
		goAddfriend(e){
			if(this.chatCheckedShow){
				return;
			}
			uni.navigateTo({
				url:'../personInfo/detail?param='+e.userId+'&source=2'
			})
		},
		textChuli(content) {
			return this.$fc.textGetUrl({content:content});
		},
		goToUrl(url){
			if(this.chatCheckedShow){
				return;
			}
			return this.$fc.goWebUrl({url:url});
		},
		openVideo(e){
			if(this.chatCheckedShow){
				return;
			}
			return this.$fc.openVideo(e);
		},
		lookFile(e){
			if(this.chatCheckedShow){
				return;
			}
			this.$fc.plusDownload({onlinePath:e.url}).then(res=>{
				this.$fc.plusOpenFile({filePath:res})
			})
		},
		playVOICE(url){
			if(this.chatCheckedShow){
				return;
			}
			this.showTrs=false
			if(this.paused && this.play_mic_id==url){
				this.innerAudioContext.destroy()
				this.paused=!this.paused
				return;
			}
            this.changeMicId(url);
			this.innerAudioContext = uni.createInnerAudioContext();
			// var url='https://www.w3school.com.cn/i/horse.ogg'
			this.innerAudioContext.sessionCategory='soloAmbient'
			this.innerAudioContext.src = url;
			this.innerAudioContext.play()
			
			this.innerAudioContext.onPlay(() => {
				// console.log('播放')
				this.paused=true
			})
			this.innerAudioContext.onPause(() => {
				// console.log('暂停')
                this.changeMicId('0');
				this.paused=false
				this.innerAudioContext.destroy()
			})
			this.innerAudioContext.onEnded(() => {
                this.changeMicId('0');
			});
		},
		goMap(e) {
			if(this.chatCheckedShow){
				return;
			}
			uni.openLocation({
				name: e.name,
				address: e.address,
				latitude: e.latitude,
				longitude: e.longitude,
				success: function() {}
			});
		},
		returnParse(txt) {
		    if(typeof txt=='object'){
		      return txt;
		    }else{
		      if(!this.returnParseData[txt]){
		          this.returnParseData[txt]=JSON.parse(txt);
		      }
              return this.returnParseData[txt];
		    }
		},
        changeMicId(e){
            this.$emit('MicId',e);
        },
		tryagin(e, i) {
			this.$emit('tryagin', e, i);
		},
        getimgurl(){
            var url = this.returnParse(this.item.content).url;
            if(url && url.substr(0,4)=='http'){
                var w = 155,h=225;
                var upload_type=app.globalData.appconfig?app.globalData.appconfig.upload_type:'local';
                if(upload_type=='qiniuoss')url+='?imageView2/1/w/'+w+'/h/'+h+'/q/100';
                if(upload_type=='alioss')url+='?x-oss-process=image/resize,,m_fill,h_'+h+',w_'+w;
            }
            return url;
        },
		lookimg(url){
			if(this.chatCheckedShow){
				return;
			}
			this.$emit('lookimg', url);
		},
		lookManyMsg(){
			if(this.chatCheckedShow){
				return;
			}
			if(this.returnParse(this.item.content).msgList){
				var msgInfo = this.item.content;
				var msgId = '';
			}else{
				var msgInfo = '';
				var msgId = this.returnParse(this.item.content).msgId;
			}
			uni.navigateTo({
				url: this.$fc.get_package_name()+'favorites/manymsg?msgId=' + msgId + '&msgInfo=' + msgInfo + '&windowType=' + this.item.windowType
			})
		},
		gochatOne(e) {
			if(this.chatCheckedShow){
				return;
			}
			var source=e.windowType=="GROUP" ? '7' : '3'
			uni.navigateTo({
				url:'../personInfo/detail?param='+e.personId+'&source='+source
			})
		},
		longpressItem(e,i,v) {//长按回调
			if(this.chatCheckedShow){
				return;
			}
			this.$emit('longpressItem',e,i,v)
			if(this.itemKey==this.longTapItemKey){
				this.$refs['toolx'+this.itemKey].showTab();
			}
		},
	}
};
</script>

<style lang="scss" scoped>
$avatarsize: 80rpx;
$border-radius: 12rpx;
$textcolor: #000;
$descolor: #000;
$leftbgcolor: #ffffff;
$rightbgcolor: #95EC69;

.zfb-tk-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 5px 0;
}

.zfb-tk-item .zfb-tk-item-c text {
	word-break: break-all;
}
.zfb-msg-nickname{
	height:40rpx; 
	line-height: 40rpx; 
	font-size: 24rpx;
	color: #999999;
}
.zfb-tk-msgleft,
.zfb-tk-msgright {
	text-align: left;
}

.zfb-tk-msgleft {
	float: left;
	display: flex;
	flex-direction: row;
}

.zfb-tk-item .zfb-tk-item-c::after {
	position: absolute;
	content: '';
	width: 14rpx;
	height: 14rpx;
	top: 34rpx;
	transform: rotate(45deg);
}

.zfb-tk-msgleft .zfb-tk-item-c::after {
	background: $leftbgcolor;
	left: -7rpx;
}

.zfb-tk-msgright .zfb-tk-item-c::after {
	background: $rightbgcolor;
	right: -7rpx;
}

.zfb-tk-avatar {
	min-width: $avatarsize;
	width: $avatarsize;
	height: $avatarsize;
	border-radius: $border-radius;
}

.zfb-tk-msgleft .zfb-tk-avatar {
	margin-right: 12rpx;
}

.zfb-tk-msgright .zfb-tk-avatar {
	margin-left: 12rpx;
}

.zfb-tk-msgright {
	float: right;
	display: flex;
	flex-direction: row-reverse;
}

.zfb-tk-msgcenter {
	font-size: 28rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	float: left;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	color: #999;
}

.zfb-tk-item-c {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	border-radius: $border-radius;
}

.zfb-tk-msgleft .zfb-tk-item-c,
.zfb-tk-msgright .zfb-tk-item-c {
	min-height: $avatarsize;
	background: $leftbgcolor;
	color: $textcolor;
	padding: 10px;
}

.zfb-tk-msgright .zfb-tk-item-c {
	background: $rightbgcolor;
    justify-content: flex-end; 
}

.zfb-tk-username {
	color: $descolor;
}

.zfb-tk-time {
	font-size: 28rpx;
	text-align: center;
	color: #999;
	width: 100%;
	box-sizing: border-box;
	height: 80rpx;
	line-height: 80rpx;
}

.zfb-tk-msgright .zfb-tk-time {
	text-align: right;
}

.zfb-tk-msgleft .zfb-tk-time {
	text-align: left;
}
.zfb-tk-time-notsend {
	font-size: 64rpx;
	color: #fa5151;
	margin-top: 8rpx;
}
.zfb-tk-item-c-LOCATION {
	background: #ffffff;
	border: 1px #f6f6f6 solid;
	display: flex;
	flex-direction: column;
	width: 445rpx;
	border-radius: 12rpx;
	padding: 24rpx;
}
.zfb-tk-item-c-LOCATION-name {
	font-size: 32rpx;
	color: #000000;
	// font-weight: bold;
}
.zfb-tk-item-c-LOCATION-address {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 12rpx;
}
.zfb-tk-item-c-LOCATION-map {
	background-color: #e5ffff;
	overflow: hidden;
	width: 445rpx;
	height: 150rpx;
}
.zfb-tk-item-c-img{
	border: 1px #eee solid;
	max-width: 310rpx;
	max-height: 450rpx;
}
.zfb-tk-item-c-video{
	position: relative;
}
.zfb-tk-item-c-video-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.zfb-tk-item-c-video-icon text{
	font-size: 100rpx;
	color: #dddddd;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.btn_icon{
	position: absolute;
	left: 0;
	top: 50%;height:100rpx;width:84rpx;
	margin-top: -30rpx;
}
.zfb-tk-item-c-VOICE{}
.vmove{
	animation: scalev 1s linear infinite;
	transform: scale(1);
}
@keyframes scalev {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1);
	}
}
.zfb-tk-item-c-VOICE-tras{
	display: flex;flex-direction: row;align-items: center;
}
.zfb-tk-item-c-VOICE-tras text{
	padding:6rpx 12rpx;
	font-size: 24rpx;
	background-color: #eee;
	border-radius: 12rpx;
	color: #bcbcbc;
	margin:0 12rpx;
}
.zfb-tk-item-c-VOICE-tras-icon{
	margin: 6rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #fa5151;
	position: relative;
}
.zfb-tk-item-c-VOICE-tras-text{
	width: 100%;
	font-size: 26rpx;
	color: #666;
	word-break: break-all;
	margin-bottom: 12rpx;
}
.zfb-tk-msgright .zfb-tk-item-c-VOICE-tras-text{
	text-align: right;
}
.zfb-tk-msgleft .zfb-tk-item-c-VOICE-tras-text{
	text-align: left;
}
.zfb-tk-msgleft .zfb-tk-item-c-VOICE-msg{
	flex-direction: row-reverse;
}
.zfb-tk-msgleft .zfb-tk-item-c-VOICE-tras{
	flex-direction: row-reverse;
}
.zfb-tk-item-c-VOICE-msg .zfb-tk-item-c{
	display: flex;flex-direction: row;align-items: center;
}
.zfb-tk-item-c-VOICE-msg{
	display: flex;flex-direction: row;align-items: center;
}
/*名片*/
.zfb-tk-item-c-CARD{
	width: 440rpx;
	box-sizing: border-box;
	border: 1px #f6f6f6 solid;
	padding: 24rpx;
	border-radius: 12rpx;
	background: #ffffff;
}
.zfb-tk-item-c-CARD-top{
	display: flex;flex-direction: row;align-items: center;
}
.zfb-tk-item-c-CARD-top-img{
	width: 80rpx;
	min-width: 80rpx;
	height: 80rpx;
	margin-left: 24rpx;
	border-radius: 6rpx;
}
.zfb-tk-item-c-CARD-top-content{
	overflow: hidden;
	display: flex;flex-direction: column;
}
.zfb-tk-item-c-CARD-title{
	color: #070707;
	font-size: 32rpx;
}
.zfb-tk-item-c-CARD-no{
	font-size: 24rpx;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.zfb-tk-item-c-CARD-card{
	font-size: 24rpx;
	color: #666;
	margin-top: 24rpx;
}
/*附件*/
.zfb-tk-item-c-FILE{
	width: 400rpx;
	box-sizing: border-box;
	border: 1px #f6f6f6 solid;
	padding: 24rpx;
	border-radius: 12rpx;
}
.zfb-tk-item-c-FILE-top{
	display: flex;flex-direction: row;align-items: center;
}
.zfb-tk-item-c-FILE-top-img{
	width: 80rpx;
	min-width: 80rpx;
	height: 80rpx;
	margin-right: 24rpx;
	border-radius: 6rpx;
}
.zfb-tk-item-c-FILE-top-content{
	overflow: hidden;
	display: flex;flex-direction: column;
}
.zfb-tk-item-c-FILE-title{
	color: #070707;
	font-size: 32rpx;
}
.zfb-tk-item-c-FILE-no{
	font-size: 24rpx;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.zfb-tk-item-c-FILE-card{
	font-size: 24rpx;
	color: #666;
	margin-top: 24rpx;
}

.zfb-tk-item-contentx{
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 544rpx;
}
.zfb-tk-item-contentx-name{
	color: #7C7C7E;
	font-size: 24rpx;
}
.zfb-tk-msgright .zfb-tk-item-contentx{
	align-items: flex-end;
}
.zfb-tk-msgleft .zfb-tk-item-contentx{
	align-items: flex-start;
}
.zfb-tk-item-contentx-c{
	display: flex;
	align-items: center;
	
}
.zfb-tk-msgleft .zfb-tk-item-contentx-c{
	flex-direction: row-reverse;
}
.zfb-tk-msgright .zfb-tk-item-contentx-c{
	flex-direction: row;
}
.zfb-tk-TRTC{
	align-items: center;
	display: flex;flex-direction: row;
}
.zfb-tk-TRTC .wxfont{
	font-size: 42rpx;
}
.zfb-tk-item-contentx-c-tool{display: flex;flex-direction: column;}
.zfb-tk-msgleft .zfb-tk-item-contentx-c-tool{
	align-items: flex-start;
}
.zfb-tk-msgright .zfb-tk-item-contentx-c-tool{
	align-items: flex-end;
}
.content-icon{
    width:40rpx;
    height:40rpx;
}
.abso_checkbox{
	float: left;
	position: absolute; 
	top: 50%;
	margin-top: -15px;
}
.abso_posicheckbox{
	float: left;
	width: 30px;
	height: 30px;
}
</style>
